<style>
    /*!*这个页面上的表格的样式*!*/
    .ztree {
        padding: 0;
    }

    .ztree * {
        font-size: 15px !important;
    }

    .tree-title {
        font-size: 18px !important;
    }

    .ztree li a {
        height: 50px !important;
        vertical-align: middle;
        line-height: 30px;
    }

    .ztree li > a {
        width: 100%;
    }

    .ztree li span.node_name {
        padding-left: 12px;
    }

    .ztree li span {
        line-height: 0px !important;
    }

    .ztree li ul {
        padding-left: 0px
    }

    .ztree li ul.line {
        background: none;
    }

    .ztree div.diy a {
        display: inline;
    }

    .ztree div.diy {
        border-bottom: 1px dotted #eeeeee;
        border-left: 1px solid #eeeeee;
        text-align: center;
        color: #6c6c6c;
        font-size: 20px;
        overflow: hidden;
        height: 50px;
    }

    span.switch.level1 {
        margin-left: 10px !important;
    }

    span.switch.level2 {
        margin-left: 20px !important;
    }

    span.switch.level3 {
        margin-left: 30px !important;
    }
</style>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">算法部署</h4>
</div>
<form id="defaultForm" method="post" class="form-horizontal" >
    <div class="modal-body" style="padding: 0;">
        <div style="width: 100%;overflow:auto; max-height: 500px;">
            <input style="display: none" name="id" class="form-control" th:value="${id}">
            <div class="col-xs-12" style="padding: 0">
                <div class="tree-title col-xs-3">电池包名称</div>
                <div class="col-xs-9" style="padding: 0">
                    <div class="tree-title col-sm-3">品牌</div>
                    <div class="tree-title col-sm-9">选择算法</div>
                </div>
                <div class="zTreeDemoBackground left col-xs-12" style="padding: 0">
                    <ul id="treeDemo" class="ztree"></ul>
                </div>
            </div>
        </div>

    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" onclick="check_info(this)">保存</button>
    </div>

</form>

<script th:inline="javascript">
    var setting = {

        view: {
            showIcon: false,        // 是否显示节点的图标
            addDiyDom: addDiyDom
        },
        data: {
            simpleData: {
                enable: true,       // 使用简单数据模式
                idKey: "id",        // 节点数据中保存唯一标识的属性名称
                pIdKey: "pId",      // 节点数据中保存其父节点唯一标识的属性名称
                rootPId: ""         // 用于修正根节点父节点数据 默认值：null
            }
        }
    };

    var deploys = [];
    var zNodes = [[${ztreeDtos}]];
    var equipment = [];
    //生成ztree树
    $(document).ready(function () {
        var treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

        //存放所有的部署的算法关系
        var arithmeticDeploy = [[${arithmeticDeployManages}]];
        for (i = 0; i < arithmeticDeploy.length; i++) {
            var data = {
                manage_id: arithmeticDeploy[i].arithmeticId.id,
                equipment_id: arithmeticDeploy[i].equipmentId.id
            };
            deploys.push(data);
        }
        //存放所有设备编号
        var equipments = [[${equipmentManages}]];
        for (i = 0; i < equipments.length; i++) {
            equipment.push(equipments[i].id);
        }

    });

    function addDiyDom(treeId, treeNode) {
        var aObj = $("#" + treeNode.tId + "_a");
        var _switch = $("#" + treeNode.tId + "_switch").remove();
        var _ico = $("#" + treeNode.tId + "_ico").remove();
        var _span = $("#" + treeNode.tId + "_span").remove();
        aObj.append(_switch);
        aObj.append(_ico);
        aObj.append(_span);
        var editStr;
        var selectStr=[];

        switch (treeNode.type) {
            case "1":
                editStr =
                    "<div id='diyTable_" + treeNode.id + "' class='col-sm-9'  style='float:right'>" +
                    "<div class='diy col-sm-3' >" + treeNode.brand + "</div>\n" +
                    "<div class='diy col-sm-9' >" +
                    '<select id="' + treeNode.id + '" style="width: 400px;" class="multiple" multiple="multiple" >' +
                    '</select>' +
                    '</div>';
                break;
            default:
                var param = "diy_" + treeNode.id;
                if ("true" == treeNode.isCheckAll) {
                    editStr =
                        "<div id='diyTable_" + treeNode.id + "' class='col-sm-9' style='float:right'>" +
                        "<div class='diy col-sm-3'>&nbsp;</div>\n" +
                        "<div class='diy col-sm-9'>&nbsp;</div>\n" +
                        "</div>";
                } else {
                    editStr =
                        "<div id='diyTable_" + treeNode.id + "' class='col-sm-9' style='float: right'>" +
                        "<div class='diy col-sm-3'>&nbsp;</div>\n" +
                        "<div class='diy col-sm-9'>&nbsp;</div>\n" +
                        "</div>";
                }
                break;
        }

        aObj.append(editStr);
        var btn = $("#diyBtn_" + treeNode.id + " span");
        if (btn) btn.bind("click", function () {
            $(this).closest("a").click();   // 选中对应的a标签
            choose_function($(this));
        });

        for(var i=0;i<deploys.length;i++){
            if(treeNode.id==deploys[i].equipment_id){
                selectStr.push(deploys[i].manage_id);
            }
        }

        var data = [[${arithmeticManages}]];
        var object = "#" + treeNode.id;
        $(object).select2({
            data: data,
            placeholder: '请选择',
            allowClear: true
        })

        $(object).val(selectStr).trigger("change");

    }

    var add=[];

    //每一个子节点的复选框的点击事件
    function check_info(button) {

        for (i = 0; i < equipment.length; i++) {
            var object = "#" + equipment[i];
            var selected = $(object).val();
            if (selected != undefined) {
                for (var j = 0; j < selected.length; j++) {
                    var data = {manage_id: selected[j], equipment_id: equipment[i]};
                    add.push(data);
                }
            }
        }

        $.post(
            '/project/arithmeticManage/save_arithmeticDeployManage',
            {
                add: JSON.stringify(add),
                id: $("input[name='id']").val()
            },
            function (result) {
                if (result.type == "alert") {
                    alert(result.message);
                    $(button).prev().click();
                    $("#dataTable").bootstrapTable('refresh', {url: '/project/arithmeticManage/deploy_data'});
                }
            }
        )
    }


</script>
